import React, { useEffect, useState } from 'react'
// 引入一个nonaid包,可以创建不重复的id
import "./App.css"
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export default function App() {
  //状态提升,把数据放在App中
  //初始化todoList数据,初始化为空数组
  const [todoList, setTodoList] = useState([])

  // 第一个useEffect,刚渲染App的时候,我们去本地存储localStorage中查看下是否保存有数据
  // 如果有数据我们直接将数据进行渲染
  useEffect(()=>{
    setTodoList(JSON.parse(localStorage.getItem("todoList")) || [])
  },[]) // 这里空数组不传值,表示只在初始化的时候操作这一步

  // 第二个useEffect,我们需要监听todoList ,如果发生改变,就将数据保存在本地中
  useEffect(()=>{
    // 使用localStorage.setItem(name，value)存储对象时会发现浏览器存储的内容为[object,object],这并不是我们想要的内容，这是因为我们在存储的时候没有进行类型转换，因此我们在使用localStorage.setItem()进行对象存储之前需要使用JSON.stringify(value),进行转换，转换成JSON字符串后进行存储就会是我们想要的样子了即成为{‘xxx’:‘11111’}
    localStorage.setItem("todoList",JSON.stringify(todoList))
  },[todoList])  //这里监控todoList,当todoList发生变化时,从新渲染


  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header todoList={todoList} setTodoList={setTodoList}/>
        <List todoList={todoList} setTodoList={setTodoList}/>
        <Footer todoList={todoList} setTodoList={setTodoList}/>
      </div>
    </div>
  )
}
